// 预先声明的样式，可直接使用
@import 'mixins.scss';

// 弹性布局样式 space-between
.flex_between {
  @include flex-box(nowrap, space-between, center);
}
.flex_between_wrap {
  @include flex-box(wrap, space-between, center);
}
.flex_between_start {
  @include flex-box(nowrap, space-between, flex-start);
}
// 弹性布局样式 flex-start
.flex_start {
  @include flex-box(nowrap, flex-start, center);
}
.flex_start_start {
  @include flex-box(nowrap, flex-start, flex-start);
}
.flex_start_wrap {
  @include flex-box(wrap, flex-start, center);
}

.flex_around {
  @include flex-box(nowrap, space-around, center);
}

// 垂直居中 center
.flex_center {
  @include flex-box(nowrap, center, center);
}

// end
.flex_end {
  @include flex-box(nowrap, flex-end, center);
}

// 水平垂直居中--定位方式
.position_center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 超出隐藏文字
.text_overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 伪元素竖线
.blue_line {
  position: relative;
  padding-left: 10px;
  margin-bottom: 20px;
  &::before {
    content: '';
    width: 3px;
    height: 80%;
    border-radius: 3px;
    background-color: #005a9c;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

// 多行溢出隐藏 $row展示行数
@mixin overflows($row) {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $row;
  -webkit-box-orient: vertical;
}

// 鼠标变为手势
.pointer {
  cursor: pointer;
}

// 自定义loading的class
.customLoading{
  z-index: 99999;
  @include same-box(200px);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.layout_container {
  padding: 10px;
  background: rgb(243, 245, 248);
  overflow: auto;
  .lay_index {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
  }
  .lay_detail {
    background: #fff;
    padding: 20px;
    min-height: calc(100vh - 240px);
  }
}

.dialog_container {
  padding: 20px 40px 0;
}

.tree-line {
  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }
  // 竖线
  .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #c8c9cc;
  }
  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #c8c9cc;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }

  // 展开关闭的icon
  .el-tree-node__expand-icon {
    font-size: 16px;
    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}